<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html {
				height: 100%;
			}
			
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				display: flex;
				background-color: #DDDDDD;
				/*设置弹性布局*/
				flex-direction: row;
				/*设置水平方向*/
				justify-content: center;
				/*根据direction的方向设置居中*/
				align-items: center;
				/*根据direction的反方向设置居中*/
			}
			
			.container {
				display: flex;
				width: 800px;
				height: 500px;
				border-radius: 5px;
				box-shadow: 0px 0px 10px 5px black;
				background-color: ghostwhite;
				/*设置弹性布局*/
				flex-direction: column;
				/*列布局*/
				align-items: center;
			}
			
			.title {
				font-size: 60px;
				font-weight: bold;
				color: red;
				text-shadow: 5px 5px 5px #A9A9A9;
				letter-spacing: 15px;
				margin: 50px 0;
			}
			
			.login-input {
				position: relative;
				width: 300px;
				height: 50px;
				border: 0px solid red;
				margin: 5px 0;
			}
			
			.login-input>label {
				box-sizing: border-box;
				position: absolute;
				border: 0px solid red;
				width: 65px;
				height: 50px;
				line-height: 50px;
				letter-spacing: 2px;
				padding-left: 10px;
				color: #666666;
			}
			
			.login-input>input {
				box-sizing: border-box;
				border-radius: 5px;
				border: 1px solid #DDDDDD;
				padding-left: 65px;
				outline: none;
				font-size: 18px;
				width: 100%;
				height: 100%;
			}
			
			.login-button {
				position: relative;
				width: 300px;
				height: 50px;
				margin: 15px 0;
			}
			
			.login-button>button {
				border: 0;
				width: 100%;
				height: 100%;
				border-radius: 5px;
				border: 1px solid #DDDDDD;
				outline: none;
				background-color: white;
				letter-spacing: 15px;
				padding-left: 15px;
				color: #666666;
				font-size: 18px;
			}
			
			.login-button>button:hover {
				cursor: pointer;
				background-color: cornflowerblue;
				color: white;
			}
			
			.login-button>button:active {
				font-weight: bold;
				outline: none;
				border: 0;
				box-shadow: 0px 0px 8px 1px #7088FF;
			}
		</style>

	</head>

	<body>
		<div class="container" id="login-container">
			<div class="title">
				加中实训办公平台
			</div>
			<div class="login-input">
				<label>账户：</label>
				<input type="text" v-model="user.u_id"/>
			</div>
			<div class="login-input">
				<label>密码：</label>
				<input type="password" v-model="user.u_pwd"/>
			</div>
			<div class="login-button">
				<button @click.prevent="login">登录</button>
			</div>
		</div>
	</body>
	

</html>